import Module from "@/views/dashboard/data/components/Module";
import { defineComponent } from "vue";
import bg1 from "./assets/4266.webp";
import bg2 from "./assets/4274.svg";
import bg3 from "./assets/4273.svg";
import bg4 from "./assets/4272.svg";
import bg5 from "./assets/4271.svg";

export default defineComponent({
	name: "RecourseBuild",
	setup() {
		return () => (
			<Module title={"资源建设"}>
				<div class={"w-full h-full flex flex-row items-end justify-center"}>
					<div class={"flex flex-col h-full text-white justify-between"}>
						<div class={" text-[13px]"}>数字化资源中心</div>
						<div class={"flex flex-row my-2"}>
							<div class={"w-[30px] h-[36px] bg-[#3048E9] text-[28px] text-center leading-[36px] mr-1"}>6</div>
							<div class={"w-[30px] h-[36px] bg-[#3048E9] text-[28px] text-center leading-[36px] mr-1"}>2</div>
							<div class={"w-[30px] h-[36px] bg-[#3048E9] text-[28px] text-center leading-[36px] mr-1"}>3</div>
							<div class={"w-[30px] h-[36px] bg-[#3048E9] text-[13px] text-center leading-[36px] mr-1"}>个</div>
						</div>
						<div class={" text-[13px] mt-2"}>资源库总量</div>
						<div class={" text-[26px] mb-2"}>8321.5TB</div>
						<div
							class={
								"w-[120px] h-[28px] rounded border-[1px] border-[#2c579c] border-solid text-[13px] leading=[26px] text-center text-[#419EFF]"
							}
						>
							年度增长：230%
						</div>
					</div>
					<div class={" h-full w-full mx-8 relative flex flex-row item.scss-end"}>
						<img class={"w-full"} src={bg1} alt="" />
						<div class={"w-fit absolute bottom-5 left-4 flex flex-row items-start"}>
							<img class={"w-[38px]"} src={bg2} alt="" />
							<div class={"flex flex-col w-[26px]"}>
								<div class={"text-[13px] text-white"}>网关</div>
								<div class={"text-[#39E2F6] text-[18px]"}>36</div>
							</div>
						</div>

						<div class={"w-fit absolute bottom-12 left-16 flex flex-row items-start"}>
							<img class={"w-[38px]"} src={bg3} alt="" />
							<div class={"flex flex-col w-[26px]"}>
								<div class={"text-[13px] text-white"}>网关</div>
								<div class={"text-[#39E2F6] text-[18px]"}>36</div>
							</div>
						</div>
						<div class={"w-fit absolute bottom-8 right-6 flex flex-row items-start"}>
							<img class={"w-[38px]"} src={bg4} alt="" />
							<div class={"flex flex-col w-[26px]"}>
								<div class={"text-[13px] text-white"}>网关</div>
								<div class={"text-[#39E2F6] text-[18px]"}>36</div>
							</div>
						</div>
						<div class={"w-fit absolute bottom-4 right-2 flex flex-row items-start"}>
							<img class={"w-[38px]"} src={bg5} alt="" />
							<div class={"flex flex-col w-[26px]"}>
								<div class={"text-[13px] text-white"}>网关</div>
								<div class={"text-[#39E2F6] text-[18px]"}>36</div>
							</div>
						</div>
					</div>
				</div>
			</Module>
		);
	}
});
